<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2022/12/7
  Time: 22:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>管理员主页</title>
    <script src="<%=request.getContextPath()%>/js/index.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/admin_main.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-container>
        <el-aside width="200px">
            <el-menu :default-openeds="['1','2','3','4']" default-active="2">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-order"></i>
                        <span>用户题库</span>
                    </template>
                    <el-menu-item_group>
                        <el-menu-item index="1-1" @click="goQuestionBankInfo">题库信息</el-menu-item>
                        <el-menu-item index="1-2" @click="goQuestionBankUpdateData">编辑数据</el-menu-item>
                        <el-menu-item index="1-3" @click="goQuestionBankAddData">添加数据</el-menu-item>
                    </el-menu-item_group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-user"></i>
                        <span>用户信息</span>
                    </template>
                    <el-menu-item_group>
                        <el-menu-item index="2-1" @click="goUserInfo">用户数据</el-menu-item>
                    </el-menu-item_group>
                    <el-menu-item_group>
                        <el-menu-item index="2-2" @click="goQuestionMessage">反馈管理</el-menu-item>
                    </el-menu-item_group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-more-outline"></i>
                        <span>更多</span>
                    </template>
                    <el-menu-item_group>
<%--                        <el-menu-item index="3-1">数据统计</el-menu-item>--%>
                        <el-menu-item index="3-1" @click="goSelectMessage">通知管理</el-menu-item>
                        <el-menu-item index="3-2" @click="goSendMessage">发送通知</el-menu-item>
                    </el-menu-item_group>
                </el-submenu>
<%--                <el-submenu index="4">--%>
<%--                    <template slot="title">--%>
<%--                        <i class="el-icon-setting"></i>--%>
<%--                        <span>设置</span>--%>
<%--                    </template>--%>
<%--                    <el-menu-item_group>--%>
<%--                        <el-menu-item index="4-1">系统状态</el-menu-item>--%>
<%--                        <el-menu-item index="4-2">系统设置</el-menu-item>--%>
<%--                    </el-menu-item_group>--%>
<%--                </el-submenu>--%>
            </el-menu>
        </el-aside>
        <el-container :style="defaultWidth">
            <el-header>
                <el-menu mode="horizontal">
                    <el-menu-item index="1" @click="backIndex">首页</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">消息</template>
                        <el-menu-item index="2-1" @click="goUserFeedback">我的消息</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <el-avatar v-for="item in lists" :size="45" slot="title">{{item.user_nickname}}</el-avatar>
                        <el-menu-item index="3-1" @click="adminMain">
                            <template>
                                <i class="el-icon-user"></i>
                            </template>
                            我的主页
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <template>
                                <i class="el-icon-reading"></i>
                            </template>
                            帮助
                        </el-menu-item>
                        <el-menu-item index="3-3" @click="adminExit">
                            <template>
                                <i class="el-icon-switch-button"></i>
                                退出
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-main>
                <%--scrolling="auto"--%>
                <iframe :style="defaultHeight" :src="main" frameborder="0">
                </iframe>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                defaultHeight: {
                    height: "",
                },
                defaultWidth: {
                    width: "",
                },
                lists: [],
                main: "index_admin.jsp",
            }
        },
        methods: {
            //定义方法，获取高度减去头尾
            getHeight() {
                this.defaultHeight.height = window.innerHeight - 120 + "px";
            },
            getWidth() {
                this.defaultWidth.width = window.innerWidth - 200 + "px";
            },
            goUserFeedback() {
                this.main = "/online_website/admin/header/user_feedback.jsp"
            },
            goQuestionBankInfo() {
                this.main = "/online_website/admin/aside/question_bank_info.jsp";
            },
            goQuestionBankUpdateData() {
                this.main = "/online_website/admin/aside/question_bank_update.jsp";
            },
            goQuestionBankAddData() {
                this.main = "/online_website/admin/aside/question_bank_insert.jsp";
            },
            goUserInfo() {
                this.main = "/online_website/admin/aside/user_info.jsp";
            },
            goSelectMessage(){
                this.main='/online_website/admin/aside/manageMessage.jsp'
            },
            goSendMessage(){
                this.main='/online_website/admin/aside/sendMessage.jsp'
            },
            goQuestionMessage(){
                this.main='/online_website/admin/header/processInfo.jsp'
            },
            adminMain() {
                this.main = "info_admin.jsp";
            },
            adminExit() {
                this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href = "/online_website/common/quit";
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            backIndex() {
                this.main = "index_admin.jsp"
            }
        },

        created() {
            //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
            window.addEventListener("resize", this.getWidth);
            window.addEventListener("resize", this.getHeight);
            this.getHeight();
            this.getWidth();
            //获取账号session
            var userAccount = '<%=session.getAttribute("userAccount")%>';
            //发送数据
            axios({
                url: "DetailedInfo",
                method: "post",
                contentType: "application/json",
                params: {
                    userAccount: userAccount,
                }
            }).then((res) => {
                //获取数据
                axios.get('/online_website/admin/DetailedInfo').then((res) => {
                    this.lists = res.data;
                });
            });
        },
    })
</script>
</html>
